<template>
	<view class="content">
		<view class="pageHeader">
			手机号修改
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			<view style="padding:50upx 20upx 26upx;font-size: 28upx;color: #666;border-bottom: 2upx solid #EFEFEF;">
				<input type="text" maxlength="11"  placeholder="请输入手机号" v-model="phone" class="modeinp"/>
			</view>	
			<view class="flex aic fsb" style="padding: 14upx 20upx;font-size: 28upx;color: #666;border-bottom: 2upx solid #EFEFEF;">
				<input type="text" placeholder="请输入验证码" v-model="verify" style="font-size: 30upx;" />
				<button v-if="!is_send" @tap="sendVerify()" class="code">发送验证码</button>
				<button v-if="is_send"  class="code">{{times}}s</button>
			</view>
			<button @tap="modPhone()" class="surebtn">确认</button>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				phone:'',
				verify:'',
				times:60,
				is_send:false,
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.redirectTo({
					url:'../setting'
				})
			},
			sendVerify(){
				let that = this
				if(!that.phone){
					uni.showToast({
					  title:'请输入要修改的手机号',
					  icon:'none'
					})	
					return;
				}
				postAjax('user/Verify',{
					token:that.userToken,
					accounts:that.phone,
					type:'sms',
				},function(data){
					console.log(data)
					if(data.code==0){
						uni.showToast({
						  title:'短信发送成功',
						  icon:'none'
						})						
						
						that.getCode()
					}else{
						uni.showToast({
						  title:'短信发送失败，请稍后重试',
						  icon:'none'
						})
					}
							
				})
			},
			 // 倒计时
           	getCode: function () {
				    
					this.is_send=true
				   var interval = setInterval(() => {
					  --this.times
				   }, 1000)
				   setTimeout(() => {
					  clearInterval(interval)
					  this.is_send=false
				   }, 60000)
			},
	
			
			modPhone(){
				let that = this
				if(!that.phone){
					uni.showToast({
					  title:'请输入要修改的手机号',
					  icon:'none'
					})	
					return;
				}
				postAjax('user/modMobile',{
					token:that.userToken,
					accounts:that.phone,
					type:'sms',
					verify:that.verify,
				},function(data){
					console.log(data)
					if(data.code==0){
						uni.setStorageSync('userinfo.mobile',that.phone)
						uni.showToast({
						  title:'修改成功',
						  icon:'none'
						})							
						uni.redirectTo({
							url:'../setting'
						})
					}else{
						uni.showToast({
						  title:'修改失败，请稍后重试',
						  icon:'none'
						})
					}
							
				})
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.surebtn{display: block;font-size: 30upx;width:456upx;padding: 0;background:#1D84E8;color: #fff;margin: 260upx auto 0;}
	.surebtn::after,.code::after{border: none;}
	.code{color: #007AFF;font-size: 30upx;border:none;display: inline-block;padding: 0 12upx;background-color: transparent;}
	.regoodbox{padding:0 30upx;}
</style>
